<!--

    Copyright (c) 2012, Mayocat <hello@mayocat.org>

    This Source Code Form is subject to the terms of the Mozilla Public
    License, v. 2.0. If a copy of the MPL was not distributed with this
    file, You can obtain one at http://mozilla.org/MPL/2.0/.

-->
<ng-form name="settingsForm">
<div id="settings">
    <div class="span8">
        <!-- header -->
        <div class="page-header">
            <h1 class="">{{'settings.title.general' | translate}}</h1>
        </div>

        <form name="generalForm">
            <fieldset>

                <div class="block">
                    <!-- Shop timezone -->
                    <div ng-show="isVisible('general.time.timeZone')"
                         ng-class="{default: isDefaultValue('general.time.timeZone')}">
                        <p><label for="shopTimeZone">{{'settings.misc.timeZone' | translate}}</label></p>

                        <select id="shopTimezone" name="name" class="input-xlarge"
                                ng-model="settings.general.time.timeZone.value"
                                ng-disabled="!isConfigurable('general.time.timeZone')">
                            <option value="">-- {{'settings.misc.selectTimeZone' | translate}} --</option>
                            <optgroup ng-repeat="(region, list) in timeZoneRegions" label="{{ region }}">
                                <option ng-repeat="(value, timeZone) in list"
                                        value="{{ value }}"
                                        ng-selected="value == settings.general.time.timeZone.value">
                                    {{ timeZone.city }} (GMT{{ timeZone.stdOffset }})
                                </option>
                            </optgroup>
                        </select>
                    </div>

                    <!-- Default locale -->
                    <div ng-show="isVisible('general.locales.main')"
                         ng-class="{default: isDefaultValue('general.locales.main')}">
                        <p><label cfor="defaultLocale">{{'settings.misc.defaultLanguage' | translate}}</label></p>

                        <select class="input-xlarge"
                               ng-model="settings.general.locales.main.value"
                               id="defaultLocale"
                               ng-disabled="!isConfigurable('general.locales.main')">
                            <option value="">{{'settings.misc.selectALanguage' | translate}}</option>

                            <optgroup label="{{'settings.misc.languagesGroup' | translate}}">
                                <option ng-repeat="locale in localesData.locales"
                                        value="{{ locale.tag }}"
                                        ng-selected="locale.tag == settings.general.locales.main.value">
                                    {{ locale.name }}
                                </option>
                            </optgroup>

                            <optgroup label="{{'settings.misc.variantsGroup' | translate}}">
                                <option ng-repeat="variant in localesData.variants"
                                        value="{{ variant.tag }}"
                                        ng-selected="variant.tag == settings.general.locales.main.value">
                                    {{ variant.name }}
                                </option>
                            </optgroup>
                        </select>
                    </div>

                    <!-- Other locales -->
                    <div ng-show="isVisible('general.locales.others')"
                         ng-class="{default: isDefaultValue('general.locales.others')}">
                        <p><label for="otherLocales">{{'settings.misc.otherLanguages' | translate}}</label></p>
                        <list-picker ng-model="settings.general.locales.others.value"
                                     ng-disabled="!isConfigurable('general.locales.others')"
                                     display="displayLocale()">
                            <select class="input-xlarge" id="otherLocales">
                                <option value="">{{'settings.misc.selectALanguage' | translate}}</option>
                                
                                <optgroup label="{{'settings.misc.languagesGroup' | translate}}">
                                    <option ng-repeat="locale in localesData.locales"
                                            ng-disabled="locale.tag == settings.general.locales.main.value || settings.general.locales.others.value.indexOf(locale.tag) >= 0"
                                            value="{{ locale.tag }}">
                                        {{ locale.name }}
                                    </option>
                                </optgroup>

                                <optgroup label="{{'settings.misc.variantsGroup' | translate}}">
                                    <option ng-repeat="variant in localesData.variants"
                                            ng-disabled="variant.tag == settings.general.locales.main.value || settings.general.locales.others.value.indexOf(variant.tag) >= 0"
                                            value="{{ variant.tag }}">
                                        {{ variant.name }}
                                    </option>
                                </optgroup>
                            </select>
                        </list-picker>
                    </div>

                    <!-- Theme -->
                    <div ng-show="isVisible('theme.active')"
                         ng-class="{default: isDefaultValue('theme.active')}">
                        <p><label class="control-label" for="theme">{{'settings.misc.theme' | translate}}</label></p>

                        <input type="text" name="name" class="input-xlarge"
                               ng-model="settings.theme.active.value"
                               id="theme"
                               ng-disabled="!isConfigurable('theme.active')"/>
                    </div>

                    <!-- Gateway (for now, always hidden via CSS) -->
                    <div class="hidden"
                         ng-show="isVisible('payments.gateways')"
                         ng-class="{default: isDefaultValue('payments.gateways')}">

                        <p><label class="control-label" for="theme">{{'settings.misc.gateway' | translate}}</label></p>
                        <input type="text" name="name" class="input-xlarge"
                               ng-model="settings.payments.gateways.value"
                               id="gateway"
                               ng-list
                               ng-disabled="!isConfigurable('payments.gateways')"/>

                        <button ng-click="reset('payments')" class="btn">{{'global.actions.reset' | translate}}</button>
                    </div>
                </div>

            </fieldset>
        </form>

    </div>

    <div class="clearfix"></div>

    <div>
        <div class="buttons hasLoading">
            <button ng-click="updateSettings()"
                    class="btn btn-large btn-primary"
                    ng-disabled="!settingsForm.shopForm.$dirty
                    && !settingsForm.generalForm.$dirty">
                {{'entity.action.update' | translate}}
            </button>
            <span ng-class="{'loading': isSaving}"></span>
        </div>
    </div>
</div>
</ng-form>
